<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- View -->
      <!-- 视图部分，使用模型值，或是调用方法，不需要加this -->
      <p>num is {{ num }}</p>
      <!-- <p>num square is {{ num * num }}</p> -->
      <!-- 计算属性在调用的时候，千万不要加()，下面的写法是错误的 -->
      <!-- <p>num square is {{ getNumSquare() }}</p> -->
      <!-- 正确的写法 -->
      <p>num square is {{ getNumSquare }}</p>
      <p>num square is {{ getNumSquare }}</p>
      <p>num square is {{ getNumSquare }}</p>
      <p>num square is {{ getNumSquare }}</p>
      <p>num square is {{ getNumSquare }}</p>

      <!-- 调用方法 -->
      <p>method invoke {{ square() }}</p>
      <p>method invoke {{ square() }}</p>
      <p>method invoke {{ square() }}</p>
      <p>method invoke {{ square() }}</p>
      <p>method invoke {{ square() }}</p>
      <p>
        <!-- 一般没有参数，我们方法是可以不加() -->
        <!-- <button @click="add">num+1</button> -->
        <!-- 没有参数，也可以加()，只是一般我们都省略掉 -->
        <button @click="add()">num+1</button>
      </p>
    </div>

    <script>
      // ViewModel
      // 在vue实例中，如果想使用模型中的数据，或是调用方法，都要在前面加上this
      new Vue({
        el: '#app',
        // model
        data: {
          num: 10
        },
        // 计算属性
        computed: {
          // 计算函数
          getNumSquare() {
            console.log('---getNumSquare---', this.num)
            return this.num * this.num
          }
        },
        methods: {
          add() {
            this.num++
          },
          square() {
            console.log('---square---', this.num)
            return this.num * this.num
          }
        }
      })
      /**
       * 计算属性和方法的区别
       *
       * 计算属性，它是有缓存的，只要它依赖的值不变，则它无论调用多少次，只会执行一次，除非它依赖的值，发生了改变，它才会重新计算
       * 方法是没有缓存的，调用多少次，他就会执行多少次
       * */
    </script>
  </body>
</html>
